<template>
  <div class="order-container">
    <!-- <FixedTitle Title="订单"></FixedTitle> -->
    <!-- <BlankDiv></BlankDiv> -->
    <Filter :tabList="tabList" @onChange="handleClickTabs"></Filter>
    <div class="list-container" :style="{ height: `${listContainerHeight}px` }">
      <template v-if="listContainerHeight && listContainerHeight > 0">
        <scroll-view v-if="orderList.length > 0 && listContainerHeight" :scroll-y="true"
          :style="{ height: `${listContainerHeight}px` }" :scroll-top="scrollTop" @ScrollToLower="onScrollBottom"
          @Scroll="onScroll">

          <div class="list-item-container" v-for="(item, index) in orderList" :key="item.id">
            <orderItem :info="item"></orderItem>
          </div>
          <div style="height: 10px"></div>


          <div style="height: 100px"></div>
        </scroll-view>
        <div style="height: 100px"></div>
        <!-- 空状态 -->
        <template v-if="orderList.length === 0 && !loading">
          <nut-empty description="无数据"></nut-empty>
        </template>
        <!-- 加载状态 -->
        <template v-if="orderList.length === 0 && loading">
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
        </template>
      </template>
    </div>


    <!-- <custormTabbar ref="tabbar"></custormTabbar> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import Filter from "../../components/filter/index.vue";
import { removeEmptyValues } from "../../utils/tools.ts";
import orderItem from './item'
import Taro, { useDidShow, usePageScroll } from "@tarojs/taro";
import * as indexApi from '../../api/index.ts'
const listContainerHeight = ref(null);
const loading = ref(false)
const loadingstyle = ref(false);
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 10,
  // orderStatus: 0
})
const totalpage = ref(0)
const timer = ref(null)
const tabList = ref([
  {
    id: 0,
    name: "全部",
  },
  {
    id: 1,
    name: "待支付",
  },
  {
    id: 2,
    name: "已支付",
  },
  {
    id: 10,
    name: "已完成",
  },
]);
const handleClickTabs = (e) => {
  pageInfo.orderStatus = e.id
  pageInfo.currentPage = 1
  getList(0)

};
onMounted(() => {
  getList(0)
});
useDidShow(() => {
  setTimeout(() => {
    getListContainerHeight();
  }, 600);
});

const getList = async (status) => {
  const resultInfo = removeEmptyValues(pageInfo);

  const result = await indexApi.orderList(resultInfo)

  if (result.state == 200) {
    console.log(result.data, "res");
    if (status) {
      orderList.value = [...orderList.value, ...result.data.list];
      console.log(result, "resresers");
      totalpage.value = result.data.pageCount;
    } else {
      orderList.value = result.data.list;
      console.log(result, "resresers");
      totalpage.value = result.data.pageCount;
    }
    Taro.hideLoading();
  } else if (result.state == 202) {
    Taro.hideLoading();
    Taro.showToast({
      title: result.message,
      icon: "error",
      duration: 3000,
    });
  }

}

const onScrollBottom = () => {
  if (timer.value) {
    clearTimeout(timer.value);
  }

  timer.value = setTimeout(() => {
    if (pageInfo.currentPage < totalpage.value) {
      pageInfo.currentPage++;
      getList(1);
    } else {
      Taro.showToast({
        title: "没有更多了",
        icon: "none",
        duration: 3000,
      });

    }
  }, 200);
};
const getListContainerHeight = () => {
  const query = Taro.createSelectorQuery()
    .select(".list-container")
    .boundingClientRect();
  query.selectViewport();
  query.exec(function (res) {
    if (res[0]) {
      listContainerHeight.value = res[0].height;
      console.log(res[0].height);
    }
  });
};
const orderList = ref([
  // {
  //   id: 1,
  //   image: "https://gw.alicdn.com/tfscom/i4/O1CN016OVjEc22ksO1fbbjm_!!6000000007159-0-alipicbeacon.jpg_300x300.jpg",
  //   price: "35",
  //   title: "电影《孤注一掷》 专属·全国通兑券·粉丝打call专享贴",
  //   orderNo: "A2307201579573268510458",
  //   num: 1

  // },
  // {
  //   id: 2,
  //   image: "https://gw.alicdn.com/tfscom/i4/O1CN016OVjEc22ksO1fbbjm_!!6000000007159-0-alipicbeacon.jpg_300x300.jpg",
  //   price: "35",
  //   title: "电影《孤注一掷》 专属·全国通兑券·粉丝打call专享贴",
  //   orderNo: "A2307201579573268510458",
  //   num: 1

  // },
  // {
  //   id: 3,
  //   image: "https://gw.alicdn.com/tfscom/i4/O1CN016OVjEc22ksO1fbbjm_!!6000000007159-0-alipicbeacon.jpg_300x300.jpg",
  //   price: "35",
  //   title: "电影《孤注一掷》 专属·全国通兑券·粉丝打call专享贴",
  //   orderNo: "A2307201579573268510458",
  //   num: 1

  // },
  // {
  //   id: 4,
  //   image: "https://gw.alicdn.com/tfscom/i4/O1CN016OVjEc22ksO1fbbjm_!!6000000007159-0-alipicbeacon.jpg_300x300.jpg",
  //   price: "35",
  //   title: "电影《孤注一掷》 专属·全国通兑券·粉丝打call专享贴",
  //   orderNo: "A2307201579573268510458",
  //   num: 1

  // },
  // {
  //   id: 5,
  //   image: "https://gw.alicdn.com/tfscom/i4/O1CN016OVjEc22ksO1fbbjm_!!6000000007159-0-alipicbeacon.jpg_300x300.jpg",
  //   price: "35",
  //   title: "电影《孤注一掷》 专属·全国通兑券·粉丝打call专享贴",
  //   orderNo: "A2307201579573268510458",
  //   num: 1

  // },
  // {
  //   id: 6,
  //   image: "https://gw.alicdn.com/tfscom/i4/O1CN016OVjEc22ksO1fbbjm_!!6000000007159-0-alipicbeacon.jpg_300x300.jpg",
  //   price: "35",
  //   title: "电影《孤注一掷》 专属·全国通兑券·粉丝打call专享贴",
  //   orderNo: "A2307201579573268510458",
  //   num: 1

  // },

])
</script>

<style lang="scss">
.order-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;


  }

  .list-item-container {
    // padding: 0 10px 20px 10px;
    border-radius: 10px;
    padding: 0 25px;
  }

  .list-item-container:nth-child(n + 2) {
    margin-top: 25px;
  }

  .list-item-container:first-of-type {
    padding-top: 25px;
  }

  .list-item-container:last-of-type {
    padding-bottom: 300px;
  }

  .size {
    font-size: 32px;
  }
}
</style>
